<template>
	<div class="flex-container">
		<div class="flex-item">
			<Upf0 />
		</div>
		<div class="flex-item">
			<Upf1 />
		</div>
		<div class="flex-item">
			<Upf2 />
		</div>
		<div class="flex-item">
			<Upf3 />
		</div>
	</div>
</template>
  
<script>
	import Upf0 from "./Upf0.vue"
	import Upf1 from "./Upf1.vue"
	import Upf2 from "./Upf2.vue"
	import Upf3 from "./Upf3.vue"
	
	export default {
		components: {
			Upf0,
			Upf1,
			Upf2,
			Upf3
		},
	};
</script>
  
<style scoped>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.flex-item {
  flex: 1 1 48%; /* 每个div占据父容器宽度的48%，留出间隙 */
  box-sizing: border-box; /* 包含padding和border在内的宽度 */

}
</style>